import { defineComponent, ref, computed, watch, onMounted } from 'vue'
// import { _拼样式名 } from './util'
import { getValByUnit, 拼组件名, 拼样式名 } from 'amtf/utils'

const 主名 = 'radio'
const 组件名 = 拼组件名(主名)
function _拼样式名(params) {
  return 拼样式名(主名, params)
}

export default defineComponent({
  name: 组件名,
  props: {
    // 当前checkbox选中状态, 实现 v-model
    modelValue: {
      type: [String, Number, Boolean],
      default: null,
    },
    label: {
      type: String,
      default: null,
    },
    // 禁用状态
    disabled: Boolean,
    // 是否是可控组件
    isControlled: {
      type: Boolean,
      default: false,
    },
    // isControlled为true时生效
    isSelected: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, { emit, slots }) {
    // 当前checkbox选中状态
    const model = ref(props.modelValue)

    // 计算类名
    const radioClass = computed(() => [
      _拼样式名('container'),
      {
        [_拼样式名('checked')]: internalIsSelected.value,
        [_拼样式名('disabled')]: props.disabled,
      },
    ])

    // 是否选中
    const internalIsSelected = computed(() =>
      props.isControlled ? props.isSelected : model.value
    )

    // 监听value变化
    watch(
      () => props.modelValue,
      () => {
        updateModelBySingle()
      }
    )

    // 选中状态改变的事件处理
    const checkedChange = (event) => {
      if (props.disabled) {
        return false
      }
      const isChecked = event.target.checked

      if (!props.isControlled) {
        emit('input', isChecked)
      }
      // emit('on-radio-change', isChecked)
      emit('update:modelValue', isChecked)
    }

    // 获取标签内容
    const getLabelContent = () => {
      return props.label ? props.label : slots.default()
    }

    // 初始化模型
    const initModel = () => {
      // console.log(`initModel props.modelValue👉`, props.modelValue)
      model.value = props.modelValue
    }

    // 通过单选更新模型
    const updateModelBySingle = () => {
      console.log(`模型值变化了 ing👇`)
      if (!props.disabled) {
        model.value = props.modelValue
      }
    }

    // 在组件创建时初始化模型
    initModel()

    return () => (
      <label class={'ve-radio'}>
        <span class={radioClass.value}>
          <input
            checked={internalIsSelected.value}
            class={_拼样式名('input')}
            type="radio"
            value={props.label}
            onChange={checkedChange}
          />
          <span class={_拼样式名('inner')}></span>
        </span>
        <span class={_拼样式名('label')}>{getLabelContent()}</span>
      </label>
    )
  },
})
